<template>
    <div class="all-orders">
      <div v-if="orders.length > 0">
        <van-card  v-for="(order, index) in orders"  :key="index" :title="'订单编号：' + order.id"  :price="'总金额：￥' + order.total_amount">
          <template #tags>
            <van-tag :type="getTagType(order.order_status)">
              {{ getStatusText(order.order_status) }}
            </van-tag>
            <div class="goods-list">
              <div v-for="(item, itemIndex) in order.items" :key="itemIndex" class="goods-item">
                <img :src="`http://127.0.0.1:8360/${item.goods.picture}`" alt="商品图片" class="goods-image" @click="router.push(`/goodsDetail/${item.goods_id}`)" />
                <div class="goods-info">
                  <div class="goods-name">{{ item.goods.name }}</div>
                  <div class="goods-price">￥{{ item.goods.price }}</div>
                  <div class="goods-quantity">数量: {{ item.quantity }}</div>
                </div>
              </div>
            </div>
          </template>
          <template #footer>
            <div class="actions">
              <van-button type="default" size="small" @click="viewLogistics(order.order_status)">
                查看物流
              </van-button>
              <van-button v-if="order.order_status === 0" type="success" size="small" @click="confirmReceipt(order.id)">
                确认收货
              </van-button>
              <van-button v-if="order.order_status === 1" type="warning" size="small" @click="router.push(`/review/${order.id}`)">
                去评价
              </van-button>
              <van-button v-if="order.order_status === 2" type="warning" size="small" @click="DeleteOrder(order.id)">
                删除订单
              </van-button>
            </div>
          </template>
        </van-card>
      </div>
  
      <div v-else class="empty-orders">
        <van-empty description="暂无订单" />
      </div>
    </div>
  </template>
  
<script setup>
import { ref, onMounted } from "vue";
import useOrders from "@/stores/order";
const { getOrdersInfo } = useOrders()
import { updateOrderState } from "@/api";
import { showConfirmDialog, showToast } from 'vant';
import { useRouter } from "vue-router"
const router = useRouter()
const orders=ref([])
onMounted(async()=>{
    await LoadOrders()
})

const LoadOrders = async() =>{
    orders.value=await getOrdersInfo()
    console.log(orders.value);
    
}

// 状态映射
const typeMap = {
  0: "primary", // 待收货
  1: "warning", // 待评价
  2: "success", // 已完成
};

const getTagType = (status) => typeMap[status] || "default"; // 默认灰色标签

// 状态文本映射
const textMap = {
  0: "待收货",
  1: "待评价",
  2: "已完成",
};

const getStatusText = (status) => textMap[status] || "未知状态";

// 确认收货
const confirmReceipt = async (Id) => {
  showConfirmDialog({
    title: '确认收货',
    message: '您确定要收货吗？',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    onConfirm: async() => {
      // 确认收货逻辑
      await updateOrderState({ orderId:Id, statu:1 })
      await LoadOrders()
      showToast('收货成功');
    },
    onCancel: () => {
      // 取消删除逻辑
      console.log('已删除');
    },
  });
  
};

import { deleteOrder } from "@/api";
// 删除订单
const DeleteOrder = async(Id) =>{
  await LoadOrders()
  showConfirmDialog({
    title: '删除订单',
    message: '您确定要删除订单吗？',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    onConfirm: async() => {
      // 确认删除订单逻辑
      const data= await deleteOrder({
        orderId: Id
      })
      await LoadOrders()
      showToast('删除订单成功');
    },
    onCancel: () => {
      // 取消逻辑
      console.log('已取消');
    },
  });
}
  
</script>
  
<style scoped>
.all-orders {
  padding: 10px;
}

.goods-list {
  display: flex;
  flex-direction: column;
}

.goods-item {
  display: flex;
  margin-bottom: 10px;
}

.goods-image {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.goods-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.actions {
  display: flex;
  gap: 10px;
}

.empty-orders {
  text-align: center;
  margin-top: 50px;
}
</style>
